<html>
<head>
 <!--
    CPAINT (Cross-Platform Asynchronous INterface Toolkit) - Version 2

    http://sf.net/projects/cpaint
    
    released under the terms of the GPL
    see http://www.fsf.org/licensing/licenses/gpl.txt for details

    authors:  Paul Sullivan <wiley14@gmail.com>, Dominique Stender <dstender@st-webdevelopment.de>
    Copyright (c) 2005-2006 Paul Sullivan, Dominique Stender - http://sf.net/projects/cpaint
  //-->
	<title>AJAX colorpicker</title>
	<script type="text/javascript" src="../../cpaint2.inc.compressed.js"></script>
	<script type="text/javascript" src="js/colorpicker.js"></script>
	<script type="text/javascript" src="js/tooltip.js"></script>
	<script type="text/javascript">
	<!--
		function handleMouseMove(e) {
			// decorator pattern: fetch mouse position and handle tooltips
			getMouseXY(e)
			updateTooltip(mouseX, mouseY);
		}

	//-->
	</script>
	<link rel="stylesheet" type="text/css" href="colorpicker.css" />
</head>
<body>
	<img src="palette.png" id="palette" style="border="1px solid #000000;" />
	<div id="color0" class="colorfield" onClick="selectColor(0)" onMouseOver="showTooltip('tooltip0')" onMouseOut="hideTooltip()"></div>
	<div id="color1" class="colorfield" onClick="selectColor(1)" onMouseOver="showTooltip('tooltip1')" onMouseOut="hideTooltip()"></div>
	<div id="color2" class="colorfield" onClick="selectColor(2)" onMouseOver="showTooltip('tooltip2')" onMouseOut="hideTooltip()"></div>
	<div id="color3" class="colorfield" onClick="selectColor(3)" onMouseOver="showTooltip('tooltip3')" onMouseOut="hideTooltip()"></div>
	<div id="color4" class="colorfield" onClick="selectColor(4)" onMouseOver="showTooltip('tooltip4')" onMouseOut="hideTooltip()"></div>
	<br style="clear: both" />
	<div id="color5" class="colorfield" onClick="selectColor(5)" onMouseOver="showTooltip('tooltip5')" onMouseOut="hideTooltip()"></div>
	<div id="color6" class="colorfield" onClick="selectColor(6)" onMouseOver="showTooltip('tooltip6')" onMouseOut="hideTooltip()"></div>
	<div id="color7" class="colorfield" onClick="selectColor(7)" onMouseOver="showTooltip('tooltip7')" onMouseOut="hideTooltip()"></div>
	<div id="color8" class="colorfield" onClick="selectColor(8)" onMouseOver="showTooltip('tooltip8')" onMouseOut="hideTooltip()"></div>
	<div id="color9" class="colorfield" onClick="selectColor(9)" onMouseOver="showTooltip('tooltip9')" onMouseOut="hideTooltip()"></div>
	<br style="clear: both; " />
	<script type="text/javascript">
	<!--
		// initialization
		document.getElementById('palette').onclick	= getColor;
		document.onmousemove				= handleMouseMove;
		selectColor(0);
	//-->
	</script>
	<div id="tooltip0" class="tooltip"></div>
	<div id="tooltip1" class="tooltip"></div>
	<div id="tooltip2" class="tooltip"></div>
	<div id="tooltip3" class="tooltip"></div>
	<div id="tooltip4" class="tooltip"></div>
	<div id="tooltip5" class="tooltip"></div>
	<div id="tooltip6" class="tooltip"></div>
	<div id="tooltip7" class="tooltip"></div>
	<div id="tooltip8" class="tooltip"></div>
	<div id="tooltip9" class="tooltip"></div>
	
	<div id="help">
		<p><strong>A JavaScript / XML based colorpicker.</strong></p>
		<p>
			Click at any point in the color palette. The colorpicker checks the color at that point and assigns it to the selected colorfield.<br />
			By clicking a different colorfield, newly selected colors will be assigned to that slot, leaving the colors selected previously untouched.<br />
			You can get detailled information about the selected color(s) by holding the mouse over the colorfields - a tooltip will appear if a color is assigned.
		</p>
	</div>
	
	<div class="footer">
		(c) 2005, Dominique Stender | AJAX demonstration (Asynchronous JavaScript And XML): colorpicker version 1.1.0
	</div>
</body>
</html>